<template>
	<view class="order-confirm">
		<!-- 订单状态 -->
		<view class="status-section">
			<text class="status">待支付</text>
		</view>
		<!-- 订单编号 -->
		<view class="date-section">
			<text class="label">订单编号：</text>
			<text class="value">{{ orderId }}</text>
		</view>
		<!-- 订单日期 -->
		<view class="date-section">
			<text class="label">日期：</text>
			<text class="value">{{ orderDate }}</text>
		</view>

		<!-- 场地信息 -->
		<view class="venue-section">
			<text class="label">场地：</text>
			<view class="venue-list">
				<view class="venue-item" v-for="(item, index) in orderItems" :key="index">
					<text class="venue-name">{{ item.venueName }}</text>
					<text class="time-slot">{{ item.timeSlot }}</text>
					<text class="price">¥{{ item.price }}</text>
				</view>
			</view>
		</view>

		<!-- 待支付金额 -->
		<view class="payment-section">
			<text class="label">待支付：</text>
			<text class="amount">¥{{ totalAmount }}</text>
		</view>

		<!-- 手机号 -->
		<view class="phone-section">
			<text class="label">姓名：</text>
			<input type="number" v-model="name" placeholder="请输入预订人姓名" maxlength="11" />
			<text class="label">手机号：</text>
			<input type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" />
		</view>

		<!-- 备注 -->
		<view class="remark-section">
			<text class="label">备注：</text>
			<textarea v-model="remark" placeholder="请输入备注信息（选填）" />
		</view>

		<!-- 退订政策 -->
		<view class="policy-section">
			<view class="policy-icon">!</view>
			<text class="policy-text">各球场开票和退改政策不同，具体服务政策请咨询球场。</text>
		</view>

		<!-- 底部支付按钮 -->
		<view class="bottom-bar">
			<text class="total-amount">¥{{ totalAmount }}</text>
			<button class="pay-btn" @tap="handlePay">立即支付</button>
		</view>
	</view>
</template>

<script>
	import {
		wxPay,
		queryPayResult,
		pay
	} from '@/api/order/order.js'

	export default {
		data() {
			return {
				orderId: '',
				orderDate: '',
				orderItems: [],
				venueInfo: {},
				totalAmount: 0,
				phone: '',
				name: '',
				remark: '',
				orderInfo: null
			}
		},
		onLoad() {
			const orderInfo = uni.getStorageSync('orderInfo')
			if (orderInfo) {
				this.orderInfo = orderInfo
				this.orderId = orderInfo.orderId
				this.orderDate = orderInfo.date
				this.orderItems = orderInfo.items
				this.venueInfo = orderInfo.venueInfo
				this.totalAmount = orderInfo.totalAmount
			}
		},
		methods: {
			async handlePay() {
				if (!this.name) {
					this.$modal.showToast('请输入预订人姓名')
					return
				}
				if (!this.phone) {
					this.$modal.showToast('请输入预订人手机号')
					return
				}
				let data = {
					id: this.orderInfo.orderId,
					name: this.name,
					phone: this.phone
				}
				pay(data).then(res => {
					console.log('pay', res)
					if (res.code === 200) {
						try {
							if (!this.orderInfo || !this.orderInfo.payParams) {
								throw new Error('支付参数不完整')
							}

							// 发起微信支付
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: this.orderInfo.payParams.timeStamp,
								nonceStr: this.orderInfo.payParams.nonceStr,
								package: this.orderInfo.payParams.packageValue,
								signType: this.orderInfo.payParams.signType,
								paySign: this.orderInfo.payParams.paySign,
								success: () => {
									// 跳转到支付结果页
									uni.redirectTo({
										url: `/pages/order/result?orderId=${this.orderId}&amount=${this.totalAmount}`
									})
								},
								fail: (err) => {
									console.error('支付失败:', err)
									// 支付失败也跳转到结果页
									uni.redirectTo({
										url: `/pages/order/result?orderId=${this.orderId}&amount=${this.totalAmount}`
									})
								}
							})
						} catch (error) {
							console.error('发起支付失败:', error)
							uni.showToast({
								title: typeof error === 'string' ? error : (error.msg || '发起支付失败'),
								icon: 'none'
							})
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-confirm {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;

		.status-section {
			background: #fff;
			padding: 40rpx 30rpx;
			margin-bottom: 20rpx;

			.status {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.date-section,
		.venue-section,
		.payment-section,
		.phone-section,
		.remark-section {
			background: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.label {
				font-size: 28rpx;
				color: #666;
			}
		}

		.venue-list {
			margin-top: 20rpx;

			.venue-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.venue-name {
					font-size: 28rpx;
					color: #333;
					margin-right: 20rpx;
				}

				.time-slot {
					font-size: 26rpx;
					color: #666;
					margin-right: 20rpx;
				}

				.price {
					font-size: 28rpx;
					color: #ff6b35;
				}
			}
		}

		.phone-section {
			input {
				margin-top: 20rpx;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
		}

		.remark-section {
			textarea {
				margin-top: 20rpx;
				width: 100%;
				height: 160rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				padding: 20rpx;
				font-size: 28rpx;
			}
		}

		.policy-section {
			display: flex;
			align-items: flex-start;
			padding: 30rpx;

			.policy-icon {
				width: 32rpx;
				height: 32rpx;
				background: #ff6b35;
				color: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				margin-right: 16rpx;
				flex-shrink: 0;
			}

			.policy-text {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
			}
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

			.total-amount {
				font-size: 32rpx;
				color: #ff6b35;
				font-weight: bold;
			}

			.pay-btn {
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #4CAF50;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				text-align: center;
			}
		}
	}
</style>